<template>
  <!-- 了解-作用域插槽 -->
  <!-- 作用： 可以传子组件的数据， 给外部使用 -->
  <div class="box">
    <!-- 1. 给slot标签， 设置属性 -->
    <slot name="title" :list="list" msg="hello Vue"> </slot>
    <slot name="content" :count="99"> </slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["八戒", "悟空", "沙和尚"],
    };
  },
};
</script>

<style scoped>
.box {
  border: 2px solid #999;
  padding: 10px;
  margin: 10px;
}
</style>
